<template>
    <div id="box">
        <div class="container">
            <ul v-show="$route.path.indexOf('detail') == -1">
                <slot name="link"></slot>
            </ul>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .active {
        background-color: rgba($color: #000000, $alpha: .2);
    }

    #box {
        min-height: 7px;
        background-color: #C20C0C;
        color: #eee;

        .container {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;

            ul {
                flex: 1 1 950px;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                margin-left: 250px;

                li {
                    position: relative;
                    padding: 2px 15px;
                    margin: 9px 20px 9px 0;
                    font-size: .7rem;
                    border-radius: 10px;
                    cursor: pointer;

                    &:hover {
                        background-color: rgba($color: #000000, $alpha: .2);
                    }
                }
            }
        }
    }
</style>